<script type="text/javascript">
	$(function() {
		$( "#radio" ).buttonset();
		$( "#check" ).button();
		$( "#format" ).buttonset();
		$( "#datepicker" ).datepicker();
		$( "button" ).button();
		$( "#opendialog" ).button({
            icons: {
                primary: "ui-icon-newwin"
            }
        });
        
        $( "#opendialog" ).click(function(){
        	$( "#dialog-modal" ).dialog({
				height: 240,
				width:400,
				resizable: false,
				modal: true
			});
        });
	});
</script>

<div id="content_padding">

	<h1 style="margin-top:0px">h1 header text</h1>
	<h2>h2 header text</h2>
	<h3>h3 header text</h3>
	<h4>h4 header text</h4>
	<p>This is an example paragraph... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque non augue a felis sodales auctor sed ut sapien. Pellentesque egestas sem id nisi scelerisque vitae malesuada mauris placerat. Mauris ante urna, luctus et eleifend tempor, gravida sed nisl. Donec semper condimentum mauris vel lobortis. Donec sit amet leo sed elit tincidunt faucibus nec et est. Pellentesque arcu libero, volutpat eu fringilla vitae, tincidunt sit amet nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum in ante purus, quis hendrerit risus.</p>
	<a href="#">This is a link</a>
	
	<ul>
		<li>This is an un-ordered list</li>
		<li>Another bullet</li>
		<li>And another...</li>
	</ul>
	
	<ol>
		<li>This is an ordered list</li>
		<li>This is number 2</li>
		<li>Finally number 3</li>
	</ol>
	
	<ul id="nav" style="width:920px; margin-top:10px; margin-bottom:20px">
		<li class="current"><a href="#">Selected Menu Item 1</a></li>
		<li><a href="#">Menu Item 2</a></li>
		<li><a href="#">Menu Item 3</a></li>
		<li><a href="#">Menu Item 4</a></li>
		<li><a href="#">Menu Item 5</a>
			<ul>
				<li><a href="#">Submenu Item</a></li>
			</ul>
		</li>
	</ul>
	
	<label for="textinput">Label and textbox:</label><br />
	<input type="text" name="textinput" style="width:280px" />
	<br /><br />
	<select>
		<option>This is a dropdown</option>
		<option>item1</option>
		<option>item2</option>
		<option>item3</option>
		<option>item4</option>
		<option>item5</option>
	</select>
	<br /><br />
	
	
	<div id="radio">
		<input type="radio" id="radio1" name="radio" /><label for="radio1">Radio Button 1</label>
		<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Radio Button 2</label>
		<input type="radio" id="radio3" name="radio" /><label for="radio3">Radio Button 3</label>
	</div>
	
	<div id="format">
	<input type="checkbox" id="check" /><label for="check">Checkbox Toggle Button</label>
	</div>

	<div style="clear:both"></div>
	<br />
	
	<input type="radio" name="radiobtns" style="padding-top:10px;" /><label style="padding-top:0px">Regular Radio Button 1</label><br />
	<input type="radio" name="radiobtns" checked="checked" /><label>Regular Radio Button 2</label><br />
	<input type="radio" name="radiobtns" /><label>Regular Radio Button 3</label><br />
	
	<br />
	<div style="clear:both"></div>
	
	<input type="checkbox" value="normal checkbox1" id="chk" /><label for="chk" >Regular Checkbox</label>
	<br />
	
	<p>Date: <input type="text" id="datepicker"></p>
	
	<button>This is a button</button><br /><br />
	
	<button id="opendialog">Click here to open up a dialog window</button><br /><br />
	
	<div id="dialog-modal" title="Basic modal dialog">
		<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
	</div>

</div>